<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜单列表"
      row-key="path"
      :indent="30"
      :columns="columns"
      :request-api="getTableList"
      :pagination="false"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" @click="openDrawer('新增')" :icon="CirclePlus">新增角色 </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18" v-if="scope.row.icon && scope.row.icon != '#'">
          <component :is="scope.row.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <template v-if="!scope.row.admin">
          <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)"> 编辑 </el-button>
          <el-button type="primary" link :icon="EditPen" @click="openDrawer('新增', scope.row)"> 新增 </el-button>
          <el-button type="primary" link :icon="Delete" @click="deleteRow(scope.row)"> 删除 </el-button>
        </template>
      </template>
    </ProTable>
    <EditDrawer ref="editDrawerRef" @success="handleSuccess" />
  </div>
</template>

<script setup lang="tsx" name="systemRole">
import { ref } from "vue";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { SystemApi } from "@/api/modules";
import EditDrawer from "./components/editDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { handleTree } from "@/utils";
import { ColumnProps } from "@/components/ProTable/interface";
import { IRole } from "./components/role.interface";
const success = data => {};

const editDrawerRef = ref<InstanceType<typeof EditDrawer> | null>(null);
const proTable = ref();
const tableData = ref([]);
const menuData = ref([]);
const status = ref(1);

// 表格配置项
const columns: ColumnProps[] = [
  { type: "index", label: "序号", width: 150 },
  // { prop: "type", label: "类型", enum: getTypeList, fieldNames: { label: "userLabel", value: "userStatus" } },
  { prop: "roleName", label: "角色名称", width: 240, align: "left", search: { el: "input" } },
  // { prop: "enName", label: "英文名称", align: "left" },
  { prop: "roleKey", label: "权限字符", search: { el: "input", props: { width: "200px" } } },
  { prop: "roleSort", label: "排序编号" },
  {
    prop: "status",
    label: "状态",
    width: 120,
    enum: [
      { label: "启用", value: 0 },
      { label: "禁用", value: 1 },
    ],
    // 字典请求携带参数
    // enum: () => getUserGender({ id: 1 }),
    search: { el: "select", props: { filterable: true, width: "200px" } },
    fieldNames: { label: "label", value: "value" },
  },
  { prop: "createTime", label: "创建时间", width: 300 },
  { prop: "operation", label: "操作", width: 250, fixed: "right" },
];
const getTableList = async (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  const { data } = await SystemApi.getRoleList(newParams);
  if (data.list.length > 0) {
    tableData.value = data.list;
  }
  return Promise.resolve({ data: tableData.value });
};

const openDrawer = (title: string, row: Partial<Menu.MenuOptions> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? SystemApi.addRole : title === "编辑" ? SystemApi.putRole : undefined,
    getTableList: proTable.value?.getTableList,
  };

  editDrawerRef.value?.acceptParams(params);
};
const changeStatus = row => {
  status.value = 0;
};
const handleSuccess = (form: any) => {};
const deleteRow = async row => {
  await useHandleData(SystemApi.deleteRole, { id: row.menuId }, `删除【${row.menuName}】`);
  proTable.value.getTableList();
};
</script>
